<template>
  <div v-loading="loading" class="big-wrap" id="screen">
    <BigScreenHeader />
    <main class="wrapper flex">
      <div class="wrapper-left">
        <Title title="领导批示交办" :icon="LeaderIcon" />
        <LeaderAssignTask />
      </div>
      <div class="wrapper-main">
        <TotalNum :list="res" />
        <Title title="十五类重要工作完成情况" :icon="KindIcon" />
        <KindCounts :list="res" />
        <Title
          title="部门考核"
          :show-more="true"
          @click="handleDepartmentCheck"
          :icon="CheckIcon"
        />
        <DepartmentCheck />
      </div>
      <div class="wrapper-left">
        <Title
          title="已超时事项"
          :show-more="true"
          :icon="TimeoutIcon"
          @click="handleTimeoutMore"
        />
        <TimeoutEvents />
        <Title
          title="重点关注"
          :show-more="true"
          :icon="FocusIcon"
          @click="handleFocusMore"
        />
        <ImportantFocus />
        <Title title="相关链接" :icon="LinkIcon" />
        <LinkList />
      </div>
    </main>
    <DetailDialog
      v-if="show"
      :options="optionItem"
      @close="close"
      :type="dialogType"
    />
  </div>
</template>

<script lang="ts" setup>
import BigScreenHeader from './layout/BigScreenHeader.vue'
import Title from './components/Title.vue'
import LeaderAssignTask from './components/LeaderAssignTask.vue'
import TimeoutEvents from './components/right/TimeoutEvents.vue'
import ImportantFocus from './components/right/ImportantFocus.vue'
import TotalNum from './components/main/TotalNum.vue'
import KindCounts from './components/main/KindCounts.vue'
import DepartmentCheck from './components/main/DepartmentCheck.vue'
import LinkList from './components/right/LinkList.vue'
import useFetch from '@/hooks/useFetch'
import { generatePageParams } from '@screen/utils/index'
import { getAllViewMatterStatus } from '@screen/apis/index'
import DetailDialog from './components/DetailDialog.vue'
import useShowDialog from '@screen/hooks/useShowDialog'
import LeaderIcon from './images/title-leader-icon.png'
import KindIcon from './images/title-kind-icon.png'
import CheckIcon from './images/title-check-icon.png'
import TimeoutIcon from './images/title-timeout-icon.png'
import FocusIcon from './images/title-focus-icon.png'
import LinkIcon from './images/title-link-icon.png'
import { EDialogType } from './utils/projectTable'

const { show, close, handleClick, optionItem, dialogType, changeDialogType } =
  useShowDialog()

const { loading, res } = useFetch<Record<string, any>[]>(
  getAllViewMatterStatus,
  generatePageParams(),
  true,
)

function handleFocusMore() {
  changeDialogType(EDialogType.EVENT_COUNT)
  handleClick({
    title: '重点关注',
    isFocus: '1',
  })
}

function handleTimeoutMore() {
  changeDialogType(EDialogType.EVENT_COUNT)
  handleClick({
    title: '已超时事项',
    matterStatus: 2,
  })
}

function handleDepartmentCheck() {
  changeDialogType(EDialogType.DEPARTMENT_SORT)
  handleClick({ title: '部门考核' })
}
</script>

<style lang="scss" scoped>
:deep(.el-loading-mask) {
  background-color: #010821 !important;
}

:deep(.el-input__wrapper),
:deep(.el-select--small .el-select__wrapper) {
  padding-left: 12px;
  background: rgba(47, 109, 255, 0.2) !important;
  border: 1px solid rgba(47, 109, 255, 0.8);
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(47, 109, 255, 0.8);
}
</style>

<style>
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src:
    url('./fonts/YouSheBiaoTiHei.woff2') format('woff2'),
    url('./fonts/YouSheBiaoTiHei.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DDin';
  src: url('./fonts/D-DIN-Bold.ttf') format('truetype');
}

:root {
  --big-screent-hover-color: rgba(42, 98, 234, 1);
}
.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.flex-row-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.flex-row-between-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-col-start {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-col-start-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.flex-row-center-start {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.flex-row-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.flex-col-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
}

.gradient-text {
  background: linear-gradient(180deg, #ffffff 38.55%, #70c1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  /* 根据实际行高调整 */
  max-height: 3em;
}

div,
main,
aside,
header,
section,
p,
h1,
h2 {
  box-sizing: border-box;
}

.large-link {
  text-decoration: underline;
  cursor: pointer;
}
.large-link:hover {
  color: var(--big-screent-hover-color);
}
</style>

<style lang="scss" scoped>
.big-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(./images/body-bg.png) no-repeat center / cover;
  font-size: vw(14);
  overflow: hidden;
  color: #fff;
}
.wrapper {
  width: 100%;
  padding: vw(45) vw(24) 0;
  height: vh(992);

  &-main {
    width: vw(1176);
    height: 100%;
    padding: 0 vw(30);
  }

  &-left,
  &-right {
    width: vw(348);
    height: 100%;
    padding-top: vh(8);
    box-sizing: border-box;
  }
}
</style>
